<template>
  <div class="containt">
    <div style="margin-bottom: 10px; display: flex; justify-content: space-between">
      <div>
        <el-icon>
          <Search />
        </el-icon>
        <i>筛选搜索</i>
      </div>
      <div>
        <ElButton plain @click="reset(formRef)">重置</ElButton>
        <ElButton type="primary" @click="search(formRef)">查询搜索</ElButton>
      </div>
    </div>
    <el-col>
      <el-form
        inline
        :model="form"
        ref="formRef"
        label-width="140px"
        label-position="right"
      >
        <el-form-item label="输入搜索:" prop="keyword">
          <el-input placeholder="商品名称" v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="商品货号:" prop="productSn">
          <el-input placeholder="商品货号" v-model="form.productSn" type="number" />
        </el-form-item>
        <el-form-item label="商品分类:" prop="productCategoryId">
          <el-cascader :options="withChildrenList" v-model="form.productCategoryId" />
        </el-form-item>
        <el-form-item label="商品品牌:" prop="brandId">
          <el-select
            v-model="form.brandId"
            class="m-2"
            placeholder="请选择品牌"
            size="large"
          >
            <el-option
              v-for="item in categoryData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态:" prop="publishStatus">
          <el-select placeholder="全部" v-model="form.publishStatus">
            <el-option label="上架" :value="0" />
            <el-option label="下架" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态:" prop="verifyStatus">
          <el-select placeholder="全部" v-model="form.verifyStatus">
            <el-option label="审核通过" :value="0" />
            <el-option label="未审核" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { reactive, ref, defineEmits } from "vue";
import * as api from "@/request/api";
import { IProductListParams } from "@/request/PmsAdminConreiller/index";
//表单数据
let form = reactive({
  keyword: "",
  productSn: "",
  productCategoryId: null,
  brandId: null,
  publishStatus: null,
  verifyStatus: null,
});
//商品分类数据
const withChildrenList = ref([]);
//获取分类数据
let getGoodswithChildrenList = async () => {
  let withdata: any = await api.goods.GoodswithChildrenList();
  let newData = withdata.map((el) => {
    let children = el.children.map((ell) => {
      return {
        value: ell.name,
        label: ell.name,
      };
    });
    return {
      value: el.name,
      label: el.name,
      children: children,
    };
  });
  withChildrenList.value = newData;
  // console.log("newData", newData);
};
getGoodswithChildrenList();
//商品品牌数据
const categoryData = ref([]);
//获取商品品牌
let categoryList = async () => {
  let newData: any = await api.goods.GoodsBrandList({
    pageNum: 1,
    pageSize: 100,
  });
  let data = newData.list.map((el) => {
    return {
      value: el.id,
      label: el.name,
    };
  });
  categoryData.value = data;
  // console.log(data);
};
categoryList();
let formRef = ref<FormInstance>();

// 判断表单是否可以进行请求
const isFormEmit = function () {
  for (let key in form) {
    // 有不为空的字段，可以emit
    if (form[key]) {
      return true;
    }
  }
  return false;
};
// 重置表单
const reset = function (formEl: FormInstance | undefined) {
  if (!formEl) return;
  formEl.resetFields();
};
// 自定义事件
const emit = defineEmits<{ (e: "SearchEmit", param: IProductListParams): void }>();
// 搜索
const search = function (formEl: FormInstance | undefined) {
  if (isFormEmit()) {
    emit("SearchEmit", form);
  } else {
    emit("SearchEmit", null);
  }
  formEl.resetFields();
};
</script>
<style scoped>
.containt {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.el-input,
.el-select,
.el-date-picker {
  width: 200px;
}
.el-form {
  max-width: calc(100vw - 400px);
}
.el-col {
  margin-bottom: 10px;
}
span {
  margin-right: 10px;
  color: #606266;
  font-size: 14px;
}
</style>
